<template>
  <div class="hello">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />


  </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
  name: 'HelloWorld',
   data() {
    return {
      searchResult:[]
    }
  },

 methods: {
    onSave() {
      this.$toast('save');
    },
    onDelete() {
      Toast('delete');
    }
  },
  computed:{
   ...mapState(['areaList','config']),
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn{
  width: 100px;
  height: 30px;
  background: red
}
.out{
  width: 50%;
  height: 100px;
  background:greenyellow;
  border: 1px solid red
}
.spec{
  display: flex;
  align-items: center;
  justify-content: center
}
</style>
